<template>
  <div>

    <!-- 动态绑定图片的路径 -->
    <template v-for="(_, index) in 3">
      <img :src="getImageSrc(index)" alt="cloud image" @click="toggleImage(index)" />
    </template>
    {{ use?.name }}--{{ use?.age }}
  </div>
</template>

<script setup lang="ts">
import { exportData } from './exportData'
import { onMounted, watch } from 'vue';
import { reactive } from 'vue';
import { ref } from 'vue';

// 用于管理图片的状态
const imageStates = ref([false, false, false]); // 假设有3个图片，默认都是未激活
// 切换图片状态
function toggleImage(index: number) {
  imageStates.value[index] = !imageStates.value[index];
}
// 获取图片的路径，使用 import.meta.url 来动态生成图片路径
function getImageSrc(index: number) {
  if (imageStates.value[index]) {
    return new URL(`../assets/${index}_active.jpg`, import.meta.url).href;
  } else {
    return new URL(`../assets/${index}.jpg`, import.meta.url).href;
  }
}
const use = ref();

onMounted(() => {
  const res = exportData()
  console.log('use--', res.data)
  use.value = res.data;
  // // 使用 watch 监听 use.value 的变化
  // 如果需要监听变化，可以结合 watch 使用
  watch(use.value, (newName) => {
    console.log("Updated name:", newName);
  });
})
</script>